<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <style>
        header{ background-color: #ef4646; }
        #footer{  background-color: #fff; }
        #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 3px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #ef4646; }
        #footer ul li:nth-child(1){ background-image: url(../image/home.png); }
        #footer ul li:nth-child(2){ background-image: url(../image/wallet.png); }
        #footer ul li:nth-child(3){ background-image: url(../image/user.png); }
        #footer ul li:nth-child(4){ background-image: url(../image/more.png); }
        #footer ul li:nth-child(1).active{ background-image: url(../image/home-h.png); }
        #footer ul li:nth-child(2).active{ background-image: url(../image/wallet-h.png); }
        #footer ul li:nth-child(3).active{ background-image: url(../image/user-h.png); }
        #footer ul li:nth-child(4).active{ background-image: url(../image/more-h.png); }
        .flex-con{
          overflow: auto
        }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
    </header>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >首页</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >投资理财</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >我的</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >更多</li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

    var footHeight = $('#footer')[0].offsetHeight;
    var headerHeight = $('header')[0].offsetHeight;
    apiready = function () {
        // fixStatusBar( $('header')[0] );
        api.setStatusBarStyle({
          style:'light',
          color:'#ef4646'
        })
        funIniGroup();
    }

    function funIniGroup(){
        var eFooterLis = $('#footer li');
        var frames = [];
        for (var i = 0,len = eFooterLis.length; i < len; i++) {
                frames.push( {
                    name: 'frame'+i,
                    url: './frame'+i+'.html',
                    bgColor : 'rgba(0,0,0,.2)',
                    bounces:false
                } )
        }
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: $('header')[0].offsetHeight,
                w: api.winWidth,
                h: api.frameHeight-$('header')[0].offsetHeight-$('#footer')[0].offsetHeight
            },
            index: 0,
            frames: frames
        }, function (ret, err) {
            var index = ret.index;
            var eFootLis = $('#footer li');
            var activeFootLi = $('#footer li.active');
            $('#footer li.active').removeClass('active');
            $(eFootLis[index]).addClass('active');
        });
    }

    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if( tag == $('#footer li.active')[0] )return;
        var eFootLis = $('#footer li'),
            index = 0;
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                index = i;
            }else{
              $(eFootLis[i]).removeClass('active');
            }
        }
        $(eFootLis[index]).addClass('active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });
    }

</script>
